<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->
<ng-container *transloco="let t">
  <ng-container *ngIf="model$ | async as vm">
    <ng-container *ngIf="vm.project">
      <tg-title [title]="vm.project.name"></tg-title>
      <div class="project-content">
        <div class="project-title">
          <tg-ui-avatar
            size="xxl"
            type="light"
            [color]="vm.project.color"
            [avatarUrl]="vm.project.logoLarge"
            [name]="vm.project.name">
          </tg-ui-avatar>
          <h1
            class="project-name"
            id="main-area-title"
            data-test="project-name">
            {{ vm.project.name }}
          </h1>
          <tui-hosted-dropdown
            *ngIf="vm.project.userIsAdmin"
            class="edit-project-info"
            [tuiDropdownAlign]="'left'"
            [content]="projectActionsDropdown"
            [(open)]="projectActionsDropdownState">
            <button
              [attr.aria-label]="
                t('project_overview.a11y.project_action_enter_open_menu')
              "
              role="menu"
              aria-haspopup="true"
              [attr.aria-expanded]="projectActionsDropdownState"
              icon="more-vertical"
              data-test="project-actions"
              appearance="tertiary"
              tuiIconButton
              type="button"
              tgUiTooltipPosition="top-right"
              [tgUiTooltip]="t('project_overview.project_actions')"></button>
          </tui-hosted-dropdown>
        </div>
        <div class="project-content-inner">
          <section class="project-main"></section>
          <section
            class="project-description"
            data-test="project-description"
            *ngIf="vm.project.userIsAdmin || vm.project.description?.length">
            <h2 class="project-about">
              {{ t('project_overview.about') }}
            </h2>
            <div
              [class.hide]="hideOverflow"
              class="description">
              <ng-container *ngIf="vm.project.description?.length">
                <p #descriptionOverflow>{{ vm.project.description }}</p>
              </ng-container>
              <ng-container *ngIf="!vm.project.description?.length">
                <p class="empty-description">
                  <button
                    data-test="add-description"
                    class="description-edit-project-action"
                    tuiLink
                    (click)="showEditProjectModal = true">
                    {{ t('project_overview.action_add_description') }}
                  </button>
                  {{ t('project_overview.action_add_description_continue') }}
                </p>
              </ng-container>
            </div>
            <div class="actions">
              <a
                *ngIf="showDescription && !hideOverflow"
                class="link"
                tuiLink
                (click)="toggleShowDescription()"
                icon="chevron-down"
                iconAlign="right">
                {{ t('project_overview.show_full_description') }}
              </a>
              <a
                *ngIf="showDescription && hideOverflow"
                class="link"
                tuiLink
                (click)="toggleShowDescription()"
                icon="chevron-up"
                iconAlign="right">
                {{ t('project_overview.hide_full_description') }}
              </a>
            </div>
          </section>
          <section class="project-members">
            <tg-project-members></tg-project-members>
          </section>
        </div>
      </div>

      <tg-edit-project
        *ngIf="showEditProjectModal"
        [show]="showEditProjectModal"
        (submitProject)="submitEditProject($event)"
        (closeModal)="showEditProjectModal = false"
        [project]="vm.project">
      </tg-edit-project>

      <tg-delete-project
        *ngIf="showDeleteProjectModal"
        [show]="showDeleteProjectModal"
        (submitDelete)="submitDeleteProject()"
        (closeModal)="showDeleteProjectModal = false"
        [project]="vm.project">
      </tg-delete-project>
    </ng-container>
  </ng-container>

  <ng-template #projectActionsDropdown>
    <tui-data-list
      class="view-options-list"
      data-test="project-actions-list"
      tgAutoFocus
      tabindex="-1"
      [attr.aria-label]="
        t('project_overview.a11y.project_action_up_down_navigate')
      "
      role="menu">
      <button
        class="option-btn"
        tuiOption
        data-test="edit-project"
        type="button"
        (click)="showEditProjectModal = true">
        <div class="option-container">
          <tui-svg
            aria-hidden="true"
            class="option-icon"
            src="pen"></tui-svg>
          <span class="option-name">{{
            t('common_project.edit_project')
          }}</span>
        </div>
      </button>
      <!-- <button
        class="option-btn"
        tuiOption
        type="button"
        (click)="showEditProjectModal = true">
        <div class="option-container">
          <tui-svg
            aria-hidden="true"
            class="option-icon"
            src="duplicate"></tui-svg>
          <span class="option-name">{{ t('common_project.duplicate') }}</span>
        </div>
      </button>
      <button
        class="option-btn"
        tuiOption
        type="button">
        <div class="option-container">
          <tui-svg
            aria-hidden="true"
            class="option-icon"
            src="folder"></tui-svg>
          <span class="option-name">{{ t('common_project.share') }}</span>
        </div>
      </button>
      <button
        class="option-btn"
        tuiOption
        type="button">
        <div class="option-container">
          <tui-svg
            aria-hidden="true"
            class="option-icon"
            src="folder"></tui-svg>
          <span class="option-name">{{
            t('common_project.save_template')
          }}</span>
        </div>
      </button> -->
      <hr class="separator" />
      <button
        class="option-btn option-delete"
        tuiOption
        type="button"
        (click)="showDeleteProjectModal = true">
        <div class="option-container">
          <tui-svg
            aria-hidden="true"
            class="option-icon"
            src="trash"></tui-svg>
          <span class="option-name">{{
            t('common_project.delete_project')
          }}</span>
        </div>
      </button>
    </tui-data-list>
  </ng-template>
</ng-container>
